<template>
  <div class="navbar mb-2 shadow-lg bg-neutral text-neutral-content">
    <div v-show="!articleName" class="px-2 mx-2 navbar-start">
      <span class="text-lg font-bold"> Baloneo's blog! </span>
    </div>
    <div v-show="articleName" class="px-2 mx-2 navbar-start">
      <div class="flex-none">
        <button class="btn btn-square btn-ghost" @click="$router.back()">
          <svg
            class="inline-block w-6 h-6 stroke-current text-success"
            fill="none"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10 19l-7-7m0 0l7-7m-7 7h18"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
            ></path>
          </svg>
        </button>
      </div>
      <div class="flex-1 px-2 mx-2">
        <span class="text-lg font-bold">
          {{ articleName }}
        </span>
      </div>
    </div>

    <div class="hidden px-2 mx-2 navbar-center lg:flex">
      <div class="flex items-stretch">
        <a v-show="articleName" class="btn btn-ghost btn-sm rounded-btn btn-active"> 文章 </a>
        <a
          :class="{ 'btn-active': active === 'home' }"
          class="btn btn-ghost btn-sm rounded-btn"
          @click="$router.push('/home')"
        >
          主页
        </a>
        <a
          :class="{ 'btn-active': active === 'manage' }"
          class="btn btn-ghost btn-sm rounded-btn"
          @click="$router.push('/manage')"
        >
          管理
        </a>
        <a :class="{ 'btn-active': active === 'about' }" class="btn btn-ghost btn-sm rounded-btn">
          关于
        </a>
        <a :class="{ 'btn-active': active === 'contact' }" class="btn btn-ghost btn-sm rounded-btn">
          联系
        </a>
      </div>
    </div>
    <div class="navbar-end">
      <div v-show="showSearchMenu" class="flex-1 lg:flex-none">
        <div class="form-control">
          <input
            v-model="keyword"
            class="input input-ghost"
            placeholder="搜索"
            type="text"
            v-on:keyup.enter="$emit('searchClick', keyword)"
          />
        </div>
      </div>
      <div v-show="showSearchMenu" class="flex-none">
        <button class="btn btn-square btn-ghost" @click="$emit('searchClick', keyword)">
          <svg
            class="inline-block w-6 h-6 stroke-current"
            fill="none"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
            ></path>
          </svg>
        </button>
      </div>

      <label v-if="hasToken" class="btn btn-square btn-ghost modal-button" for="logout-modal">
        <svg class="inline-block w-6 h-6 stroke-current" viewBox="0 0 24 24">
          <path
            d="M10 13C7.33 13 2 14.33 2 17V20H13.09C13.07 19.86 13.05 19.73 13.04 19.59C13 19.4 13 19.2 13 19C13 18.69 13.03 18.39 13.08 18.1C13.21 17.21 13.54 16.38 14 15.66C14.21 15.38 14.42 15.12 14.65 14.88L14.67 14.85C14.9 14.61 15.16 14.39 15.43 14.19C14.76 13.88 14 13.64 13.26 13.45C12.07 13.15 10.89 13 10 13M11.05 18.1H3.9V17C3.9 16.36 7.03 14.9 10 14.9C10.68 14.9 11.36 15 12 15.11C11.5 16 11.18 17 11.05 18.1M10 12C12.21 12 14 10.21 14 8S12.21 4 10 4 6 5.79 6 8 7.79 12 10 12M10 6C11.11 6 12 6.9 12 8S11.11 10 10 10 8 9.11 8 8 8.9 6 10 6M20 22V20H16V18H20V16L23 19L20 22Z"
            fill="currentColor"
          />
        </svg>
      </label>
      <button
        v-else
        :class="{ 'btn-active': active === 'login' }"
        class="btn btn-square btn-ghost"
        @click="$router.push('/login')"
      >
        <svg class="inline-block w-6 h-6 stroke-current" viewBox="0 0 24 24">
          <path
            d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
            fill="currentColor"
          />
        </svg>
      </button>
    </div>
  </div>

  <div>
    <input id="logout-modal" class="modal-toggle" type="checkbox" />
    <div class="modal">
      <div class="modal-box">
        <div class="alert bg-white">
          <div class="flex-1">
            <svg
              class="w-6 h-6 mx-2"
              fill="none"
              stroke="#2196f3"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
              ></path>
            </svg>
            <label class="text-xl">退出该帐号？</label>
          </div>
        </div>

        <div class="modal-action">
          <label class="btn btn-primary" for="logout-modal" @click="logout">确定</label>
          <label class="btn" for="logout-modal">取消</label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { mdiMenu } from '@mdi/js'
import { getToken, removeToken } from '@/utils/auth'

export default defineComponent({
  name: 'AppHeader',
  emits: ['searchClick'],
  props: {
    active: {
      type: String,
      default: 'home'
    },
    articleName: {
      type: String,
      default: ''
    },
    showSearchMenu: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const keyword = ref('')

    const showSearch = ref(false)
    const logout = () => {
      removeToken()
      window.location.reload()
    }

    const openSearch = (show = true) => {
      showSearch.value = show
    }

    return {
      mdiMenu,
      keyword,
      showSearch,
      openSearch,
      hasToken: getToken() !== null,
      logout,
      toggleMenu: () => {
        const _ = document.querySelector('#navbar-toggle')
        const collapse = document.querySelector('#navbar-collapse')
        collapse.classList.toggle('hidden')
        collapse.classList.toggle('flex')
      }
    }
  }
})
</script>

<style scoped></style>
